<template>

  <div class="homeDetail">
    <div class="tabr-nav-title">
       <van-nav-bar
        title="工单详情"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="homeHeader">
      <div class="homeHeader-left">
        <div class="item">
           <van-button :color="getMaintainStatus(detail.workState).color" size="mini" plain>{{ getMaintainStatus(detail.workState).text }}</van-button>
        </div>
        <div class="item">
           <van-button color="#ee7e34" size="mini" plain>问题数 {{ detail.issueCount || 0 }}</van-button>
        </div>
        <div style="flex: 1;"></div>
        <div class="item">
           <van-button :color="getMaintenanceStatus(detail.raiseType).color" size="mini" plain>{{ getMaintenanceStatus(detail.raiseType).text }}</van-button>
        </div>
      </div>
    </div>

    <div
      class="cardList"
      :style="{
        height: `${detail.workState == 1 ? 'calc(100vh - 190px)':'calc(100vh - 110px)'}`,
      }"
    >

      <div class="listItem">
        <div class="list">
          <div class="right">工单编号：{{ detail.workId}}</div>
        </div>
        <div class="list">
          <div class="right">工单名称：{{ detail.workName}}</div>
        </div>
        <div class="list">
          <div class="right">工单创建时间: {{ formatDate(detail.workCreate) }}</div>
        </div>
        <div class="list">
          <div class="right">工单办结时间: {{ formatDate(detail.workEnd) }}</div>
        </div>
        <div class="list">
          <div class="right">养护路段: {{ detail.roadName }}</div>
        </div>
        <div class="list">
          <lookMapScope :detail="detail"></lookMapScope>
        </div>
        <div class="list">
          <div class="right">涉及风险点: {{ detail.workDetail }}</div>
        </div>
        <div class="list">
          <div class="right">养护班组：{{ detail.teamName }}</div>
        </div>
        <div class="list">
          <div class="right">班组长：{{ detail.personName }}</div>
        </div>
        <div class="list">
          <div class="right">电话：{{ detail.personPhone }}</div>
        </div>
        <div class="list">
          <div class="right">养护人员数：{{ detail.personNum }}</div>
        </div>
        <div class="list">
          <div class="right">备注：{{ detail.workMark }}</div>
        </div>
      </div>

      <!-- 养护上报汇总 -->
      <div class="listItem">
        <div class="title">
          养护上报汇总
        </div>
        <div class="list">
          <div class="right">雨水管网长度(km)：{{ detail.lenthtKm }}</div>
        </div>
         <div class="list">
          <div class="right">污水管网长度(km)：{{ detail.wuLenthtKm }}</div>
        </div>
        <div class="list">
          <div class="right">雨水口(座次)：{{ detail.raintNum }}</div>
        </div>
         <div class="list">
          <div class="right">雨水检查井(座次)：{{ detail.welltNum }}</div>
        </div>
         <div class="list">
          <div class="right">污水检查井(座次)：{{ detail.wuWelltNum }}</div>
        </div>
         <div class="list">
          <div class="right">雨水排放口(座次)：{{ detail.emissiontNum }}</div>
        </div>
         <div class="list">
          <div class="right">雨水泵站(座次)：{{ detail.watertPump }}</div>
        </div>
        <div class="list">
          <div class="right">污水泵站(座次)：{{ detail.wuWatertPump }}</div>
        </div>
        <div class="list">
          <div class="right">清疏雨水管网(米)含合流：{{ detail.qsysgwNum }}</div>
        </div>
        <div class="list">
          <div class="right">清疏污水管网(米)：{{ detail.wuQsysgwNum }}</div>
        </div>
        <div class="list">
          <div class="right">新建雨水管网(米)：{{ detail.xjysgwNum }}</div>
        </div>
        <div class="list">
          <div class="right">修复雨水管网(米)：{{ detail.xfysgwNum }}</div>
        </div>
        <div class="list">
          <div class="right">清掏边沟(米)：{{ detail.qtbgNum }}</div>
        </div>
        <div class="list">
          <div class="right">清掏雨水口(座)：{{ detail.qtyskNum }}</div>
        </div>
        <div class="list">
          <div class="right">新增雨水箅(个)：{{ detail.xzyssNum }}</div>
        </div>
        <div class="list">
          <div class="right">更换雨水箅(个)：{{ detail.ghyssNum }}</div>
        </div>
        <div class="list">
          <div class="right">清掏雨水检查井(座)：{{ detail.qtjjjNum }}</div>
        </div>
        <div class="list">
          <div class="right">清掏污水检查井(座)：{{ detail.wuQtjjjNum }}</div>
        </div>
        <div class="list">
          <div class="right">更换检查井盖(个)：{{ detail.ghjjjgNum }}</div>
        </div>
        <div class="list">
          <div class="right">安装防坠网(套)：{{ detail.azfzwNum }}</div>
        </div>
        <div class="list">
          <div class="right">更新或加装雨水检查井防坠网(个)：{{ detail.gxhjzjcbfzwNum }}</div>
        </div>
        <div class="list">
          <div class="right">更新或加装污水检查井防坠网(个)：{{ detail.wuGxhjzjcbfzwNum }}</div>
        </div>
         <div class="list">
          <div class="right">检修雨水泵站(座)：{{ detail.jxbzNum }}</div>
        </div>
        <div class="list">
          <div class="right">检修污水泵站(座)：{{ detail.wuJxbzNum }}</div>
        </div>
        <div class="list">
          <div class="right">清理占压物体(处)：{{ detail.qlzywtNum }}</div>
        </div>
        <!-- <div class="list">
          <div class="right">清理淤泥(吨)：{{ detail.qlynNum }}</div>
        </div> -->
        <div class="list">
          <div class="right">清除雨水管渠(含合流)淤泥(吨)：{{ detail.qlynNum }}</div>
        </div>
         <div class="list">
          <div class="right">清除污水管网淤泥(吨)：{{ detail.wuQlynNum }}</div>
        </div>
        <div class="list">
          <div class="right">养护金额(元)：{{ detail.raiseCost }}</div>
        </div>
        <div class="list">
          <div class="right">涉及风险点位数量(个)：{{ detail.riskPointCount }}</div>
        </div>
        <div class="list">
          <div class="right">实际完成时间：{{ formatDate(detail.workEnd) }}</div>
        </div>
      </div>
    </div>

    <div class="detailFoot" v-if="detail.workState == 1">
      <div style="flex: 1;">
        <van-button color="#f08c89" size="small" @click="cardClick()">工单办结</van-button>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getMaintainWorkDetail } from '@/api/identification'
import { formatDate, getMaintainStatus, getMaintenanceStatus } from '@/utils/common'
import lookMapScope from '@/components/road/lookMapScope.vue'
const router = useRouter()
const route = useRoute()
const detail = reactive({} as any)
const query = route.query
const cardClick = () => {
  router.push({
    path: '/maintain/completed',
    query: {
      id: query.id
    },
  })
}
const onClickLeft = () => history.back()
onMounted(async () => {
  const { id } = route.query
  const res = await getMaintainWorkDetail(id)
  if (res.data && res.data.code === 200) {
    Object.assign(detail, {
      ...res.data.data
    })
  }
})
</script>

<style scoped lang="less">
.homeDetail {
  height: 100vh;
  background: #f7f8f7;
}

.homeHeader {
  padding: 10px 10px 0 10px;
  background: #fff;
  display: flex;
}

.homeHeader-left {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;

  .item {
    margin-right: 5px;
    margin-bottom: 5px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.tabr-nav-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 44px;
  font-size: 18px;
  color: #29292c;
  text-align: center;
  font-style: normal;
  background: #fff;
  width: 100vw;
}

.cardList {
  overflow-y: auto;
  padding: 0 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  .listItem {
    background: #fff;
    border-radius: 10px;
    padding-bottom: 1px;
    margin-bottom: 10px;
    padding: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    .title {
      border-bottom: 1px solid;
      padding: 10px 0;
      font-size: 14px;
    }

    .list {
      display: flex;
      color: #9b9b9b;
      margin-top: 10px;
      align-items: center;
    }
  }
}

.van-button--mini {
  padding: 0 20px !important;
}

.detailFoot {
  width: 100vw;
  padding: 20px;
  background: #fff;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.van-button--small {
  width: 100%;
}
</style>

